<template>
  <div class="userinfo p-20">
    <el-avatar src="http://comicui.cn/image/avatar.png" :size="60" />
    <div class="name">
      <h2>{{ currentTimeOfDay }}好，{{ userInfo?.username }}，今天又是摆烂的一天呢！</h2>
      <p>从现在开始你至少还可以摆烂{{ 24 - ch }}个小时哦~</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';
import { ref } from 'vue';

const { userInfo } = useUserStore();
const ch = ref(0);
const currentTimeOfDay = getTimeOfDay();

function getTimeOfDay() {
  const currentTime = new Date();
  const currentHour = currentTime.getHours();
  ch.value = currentHour;

  if (currentHour < 6) {
    return '凌晨';
  } else if (currentHour < 12) {
    return '早上';
  } else if (currentHour < 14) {
    return '中午';
  } else if (currentHour < 18) {
    return '下午';
  } else {
    return '晚上';
  }
}
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  align-items: center;
  height: 100%;

  .name {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 20px;
    font-size: 14px;

    p {
      margin-top: 8px;
    }
  }
}
</style>
